<template>
  <div
    id="dataSourcePie"
    :style="{ height: '340px', width: '86%', paddingLeft: '6%' }"
  />
</template>

<script>
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';

  export default {
    name: 'DataSourcePie',
    mixins: [ChartResizeMixin],
    props: {
      dataSourceInfo: {
        type: Array,
        default: () => ([])
      }
    },
    watch: {
      dataSourceInfo(val) {
        if (val.length > 0) {
          this.drawChart()
          window.addEventListener('resize', this.resize)
        }
      }
    },
    methods: {
      drawChart() {
        this.chart = echarts.init(document.getElementById('dataSourcePie'))
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}条 ({d}%)'
          },
          legend: {
            bottom: "bottom",
            data: this.dataSourceInfo.map(item => item.label.replace('mesh_controller.', ''))
          },
          label: {
            formatter: (item) => item.value + '条' + ' (' + item.percent + '%)'
          },
          series: [{
            name: '数据源占比',
            type: 'pie',
            label: {
              show: false
            },
            data: this.dataSourceInfo.map(item => {
              return {
                name: item.label.replace('mesh_controller.', ''),
                value: item.count
              }
            }),
            center: ["50%", "47%"],
            radius: ["0%", "69%"],
            bottom: '8%',
          }],
        }
        this.chart.setOption(option)
      },
    },
  }
</script>